<template>
    <div class="add">
        <mt-header title="新增在途费用" fixed>
            <!--slot是vue的分发-->
            <router-link to="/list" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
        </mt-header>
        <div class="block"></div>
        <div class="main">
            <div class="main-item">
                <mt-cell title="时间" is-link @click.native="openPicker">
                    <div class="time">{{moment(pickerValue).format('YYYY-MM-DD HH:mm')}}</div>
                </mt-cell>
            </div>
            <div class="main-item">
                <div class="payType">费用类型</div>
                <select name="" id="select" v-model="isSelect" dir="rtl" v-on:change="changes">
                    <option v-for="s in typeList" :value="s.code">{{s.name}}</option>
                </select>
            </div>
            <div class="main-item">
                <mt-field label="金额" type="number" v-model="recList.expenseMoney" placeholder="元"></mt-field>
            </div>
            <div class="divider"></div>
            <div class="main-temp">
                <!--vue的传值还是没搞清 暂时先写死 之后在修改-->
                <!--<mt-field label="费用类型" v-model="recList.type" placeholder="元" v-if="isSelect=="></mt-field>-->
                <mt-field label="加气站" v-model="recList.gasStation" placeholder="输入加气站名称"
                          v-if="isSelect==4703"></mt-field>
                <mt-field label="加气量" type="number" v-model="recList.gasAmount" placeholder="输入加气量"
                          v-if="isSelect==4703"></mt-field>
                <mt-field label="单价" type="number" v-model="recList.unitPrice" placeholder="元"
                          v-if="isSelect==4703"></mt-field>
                <mt-field label="支付方式" v-model="recList.paymentMode" placeholder="支付方式"
                          v-if="isSelect==4703"></mt-field>
                <mt-field label="里程表数" v-model="recList.odometer" placeholder="输入里程表" v-if="isSelect==4703"></mt-field>
                <mt-field label="维修原因" v-model="recList.repairReason" placeholder="输入维修原因"
                          v-if="isSelect==4704"></mt-field>
                <mt-field label="停车时间" v-model="recList.parkingTime" placeholder="输入停车小时数"
                          v-if="isSelect==4705"></mt-field>
                <mt-field label="酒店名称" v-model="recList.hotelName" placeholder="输入酒店名称"
                          v-if="isSelect==4706"></mt-field>
                <mt-field label="住宿天数" type="number" v-model="recList.stayDay" placeholder="输入住宿天数"
                          v-if="isSelect==4706"></mt-field>
                <mt-field label="罚款原因" v-model="recList.penaltyReason" placeholder="输入罚原因"
                          v-if="isSelect==4708"></mt-field>
                <mt-field label="费用名称" v-model="recList.expenseName" placeholder="输入费用名称"
                          v-if="isSelect==4709"></mt-field>
            </div>
            <div class="divider"></div>
            <div class="main-item">
                <mt-field label="备注" v-model="recList.comments" placeholder="备注"></mt-field>
            </div>
            <div class="divider"></div>
            <div class="main-item-upload">
                <input id="upload" type="file"/>
                <label for="upload">上传照片</label>
            </div>
        </div>
        <mt-button type="primary" class="isBtn" @click="saveExpen">确认添加</mt-button>
        <mt-datetime-picker
                ref="picker"
                type="datetime"
                v-model="pickerValue"
                @confirm="handleConfirm">
        </mt-datetime-picker>

    </div>
</template>

<script>
    import Vue from 'vue'
    import Axios from 'axios'
    import {Toast} from 'mint-ui';
    import moment from 'moment'
    Vue.prototype.moment = moment;
    export default {
        name: 'add',
        data() {
            return {
                typeList: [
                    {
                        name: '路桥费',
                        code: '4701'
                    }, {
                        name: 'ETC',
                        code: '4702'
                    }, {
                        name: '车头加液',
                        code: '4703'
                    }, {
                        name: '修车费',
                        code: '4704'
                    }, {
                        name: '停车费',
                        code: '4705'
                    }, {
                        name: '住宿费',
                        code: '4706'
                    }, {
                        name: '过磅费',
                        code: '4707'
                    }, {
                        name: '罚款',
                        code: '4708'
                    }, {
                        name: '其他费用',
                        code: '4709'
                    }
                ],
                isSelect: "4702",
                pickerValue: new Date(),
                recList: {
                    appToken: 'KppXcvUJIi+i5+lYvSk//q2nvLSdnnkVVjoE5TBv7Zu8eV0pVsf0uOn93nJc6sUQj1818Ud2HNn3G4lJRNTYskkpaEDhgoCr',
                    taskNumber: 'T2017041200041',       //任务编号
                    reportTime: '',       //登记时间
                    expenseMoney: '',     //金额
                    comments: '',         //备注
                    invoicePic: '',       //照片
                    expenseType: '',       //费用类型
                    gasStation: '',       //加气站
                    gasAmount: '',        //加气量
                    unitPrice: '',        //单价
                    paymentMode: '',      //支付方式
                    odometer: '',         //里程表
                    repairReason: '',     //维修
                    parkingTime: '',      //停车时间
                    hotelName: '',        //酒店名称
                    stayDay: '',
                    penaltyReason: '',    //罚款原因
                    expenseName: ''        //费用名称
                },
            }
        },
        mounted(){
            this.$nextTick(() => {
                this.getUserList();
            });
        },
        methods: {
            openPicker(){
                this.$refs.picker.open();
            },
            handleConfirm(data){
                this.pickerValue = data;
            },
            getUserList(){

            },
            saveExpen(){
                let url = 'http://192.168.1.111:80/mylng_logistic/services/logisticsApp/saveExpense.do';
                let data = this.recList;
                data.expenseType = this.isSelect;
                data.reportTime = this.pickerValue.getTime();
                Axios.post(url, data)
                    .then(resp => {
                        if (resp.data.errCode == '0') {
                            let instance = Toast({
                                message: '操作成功',
                                iconClass: 'icon icon-success'
                            });
                            setTimeout(() => {
                                instance.close();
                                history.go(-1);
                            }, 1000);
                        } else {
                            Toast({
                                message: '添加失败',
                            });
                        }
                    }).catch(error => {
                    console.log(error);
                })
            },
            changes(){
                console.log(this.isSelect)
            }
        },
        filters: {
            date: () => {
                return moment().format('YYYY-MM-DD HH:mm')
            }
        }
    }
</script>

<style lang="scss">
    @import "../scss/add.scss";
</style>
